<template>
  <div class="page-wrap">
    <div class="page-title">cdsSearchInput 检索框</div>
    <div class="page-sub-title">基础用法</div>
    <div style="width: 300px">
      <cds-search-input v-model="input" @click="click"></cds-search-input>
    </div>
    <highlightjs
      language="vue"
      code=" <cdsSearchInput v-model='input' @click='click'></cdsSearchInput>"
    />
  </div>
 

</template>

<script setup>
import {CdsSearchInput} from 'cds-ui-business-components'
import {ref} from 'vue'
import {ElMessage} from "element-plus";
const input = ref('')
const click = (event) => {
  console.info( event)
  ElMessage.success(input.value)
}
</script>


<style lang="scss">
pre code.hljs {
  font-size: 14px!important;
  font-family: auto!important;
}
.hljs{
  color: var(--el-text-color-primary);
  background-color: var(--backgroundColor2);
}
.page-wrap {
  text-align: left;
  font-size: 14px;
  .page-title {
    font-size: 36px;
    text-align: left;
    line-height: 100px;
    font-weight: bold;
  }
  
  .page-sub-title {
    font-size: 20px;
    font-weight: bold;
    margin: 24px 0;
  }
  
}
</style>
